<template>
  <div>
    <div class="goodslist goodsDetail" v-if="item">
      <ul>
        <li>
          <img v-bind:src="item.imageUrl"/>
          <div class="desc">
            <p class="title">{{item.title}}</p>
            <div class="flex">
              <div><span class="price">￥{{item.price}}</span>（免运费）</div>
              <div>销量：{{item.salesnumber}}</div>
            </div>
          </div>
        </li>
      </ul>
      <div class="detail-content">
        <div v-html="item.info"></div>
      </div>
    </div>
    <v-cart :isshow="isshowCart" :cart="item" v-on:closeDialog="closeCart"></v-cart>
    <div class="blackbg" v-if="isshowCart"></div>

    <v-footer :type="2" v-on:showBox="addTocart"></v-footer>
    <v-loading :showLoading="showLoading"></v-loading>

  </div>
</template>
<script>
  import {HttpRequest} from '../../common/js/httpFun'
  import {linklist} from '../../common/js/mockdata'
  import {setWechatTitle, AlertDialog} from '../../common/js/common'
  import Footer from '../footer/footer'
  import Cart from '../cart/index'
  import Loading from '../loading/index'
  export default({
    data () {
      return {
        'item': null,
        'isshowCart': false,
        'showLoading': false,
        'pid': ''
      }
    },
    computed: {
      getItem () {

      }
    },
    beforeCreate () {

    },
    created () {
      this.pid = this.$route.params.id
      if (!this.pid) {
        AlertDialog('警告', '请选择您要看的旅游项目', '确定', true)
      }
      this.fetchData()
    },
    mounted () {
    },
    methods: {
      fetchData () {
        let param = {pid: this.pid}
        this.showLoading = true
        let result = HttpRequest(linklist.goodsDetailUrl, param, 2)
        result.then((response) => {
          let body = response.body
          if (body.code === 0) {
            this.item = body.data
            this.$nextTick(function () {
              setWechatTitle(this.item.title)
            })
          }
          else {
            AlertDialog('提示', body.msg)
          }
          this.showLoading = false
        }, (response) => {
          this.showLoading = false
          AlertDialog('提示', '获取详情失败，请稍后再试', '确定', true)
        }).catch((response) => {
          this.showLoading = false
          AlertDialog('提示', '获取详情失败，请稍后再试', '确定', true)
        })
      },
      addTocart () {
        this.isshowCart = !this.isshowCart
      },
      closeCart () {
        this.isshowCart = false
      }
    },
    components: {
      'v-footer': Footer,
      'v-cart': Cart,
      'v-loading': Loading
    }
  })
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/redifined.styl"
  @import "./style.styl"
</style>
